<template>
  <div>
    <app-header title="答案解析"></app-header>

    <!-- 解析内容 -->
    <div class="explanation-container">
      <div class="answer-item" v-for="(item, index) in explanations" :key="index">
        <h6>Question {{ index + 1 }}</h6>
        <p>正确答案：<span class="correct-answer">{{ item.answer }}</span></p>
        <div class="explanation-text">
          <p>解析：</p>
          <p>{{ item.explanation }}</p>
          <ul v-if="item.analysis">
            <li v-for="(point, idx) in item.analysis" :key="idx">
              {{ point }}
            </li>
          </ul>
          <p>{{ item.conclusion }}</p>
        </div>
      </div>
    </div>

    <!-- AI分析模块 -->
    <div class="explanation-container">
      <div class="ai-analysis">
        <div class="d-flex align-items-center gap-2 mb-3">
          <i class="bi bi-robot fs-4 text-primary"></i>
          <h5 class="mb-0">AI错题分析</h5>
        </div>

        <!-- 本篇文章中的错题分析 -->
        <div class="article-analysis mb-4">
          <h6 class="text-secondary">本篇错题分析</h6>
          <div class="card border-0 bg-light mb-3">
            <div class="card-body">
              <div class="error-sentence mb-3">
                <p class="text-muted mb-1">原句：</p>
                <p class="original-text">
                  Students often find it difficult to 
                  <mark class="bg-warning">decide</mark> 
                  what career they should pursue after graduation.
                </p>
                <p class="text-danger mb-1">
                  <small>× 你的答案：choose</small>
                </p>
                <p class="text-success mb-0">
                  <small>√ 正确答案：decide</small>
                </p>
              </div>
              <div class="sentence-analysis">
                <h6 class="card-title">
                  <i class="bi bi-search text-primary"></i>
                  句子分析
                </h6>
                <ul class="list-unstyled mb-0">
                  <li v-for="(point, index) in sentenceAnalysis" :key="index" class="mb-2">
                    <i class="bi bi-dot"></i>
                    {{ point }}
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>

        <!-- 知识点分析 -->
        <knowledge-analysis :points="knowledgePoints"></knowledge-analysis>

        <!-- 学习建议 -->
        <study-suggestions 
          :review-content="reviewContent"
          :practice-suggestions="practiceSuggestions">
        </study-suggestions>
      </div>
    </div>
  </div>
</template>

<script>
import AppHeader from '@/components/common/AppHeader.vue'
import KnowledgeAnalysis from '@/components/analysis/KnowledgeAnalysis.vue'
import StudySuggestions from '@/components/analysis/StudySuggestions.vue'

export default {
  name: 'EnglishClozeExplanation',
  
  components: {
    AppHeader,
    KnowledgeAnalysis,
    StudySuggestions
  },

  data() {
    return {
      explanations: [
        {
          answer: 'B. decide',
          explanation: '在这个句子中，我们需要一个表示"决定"的动词。根据上下文，这里描述的是学生对未来职业的选择。',
          analysis: [
            'choose（选择）：语义相近但不够正式',
            'decide（决定）：最符合语境，表示经过深思熟虑的决定',
            'prefer（偏好）：不够明确，仅表示倾向',
            'want（想要）：语气过于随意'
          ],
          conclusion: '因此，decide是最恰当的选择。'
        }
      ],
      sentenceAnalysis: [
        '这是一个含有从句的复杂句型：主句 + what 引导的宾语从句',
        '"decide + what" 是固定搭配，表示"决定做什么"'
      ],
      knowledgePoints: [
        {
          title: '动词搭配',
          content: '混淆了 decide what 和 choose what 的用法：\n- decide what: 决定做什么（偏重决策过程）\n- choose what: 选择什么（偏重选择行为）'
        },
        {
          title: '从句结构',
          content: '在处理 "what + 宾语从句" 的结构时需要注意动词的选择'
        }
      ],
      reviewContent: [
        '常见动词搭配：decide + what/whether/how/when',
        '宾语从句中的动词选择规律'
      ],
      practiceSuggestions: [
        '完成5道类似的动词搭配练习题',
        '整理一个动词搭配清单，重点标注易混淆的搭配'
      ]
    }
  }
}
</script>

<style scoped>
.explanation-container {
  padding: 20px;
  background: white;
  margin: 15px;
  border-radius: 15px;
}

.answer-item {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

.correct-answer {
  color: #28a745;
  font-weight: bold;
}

.explanation-text {
  color: #666;
  margin-top: 10px;
  line-height: 1.6;
}

.original-text {
  font-size: 0.95rem;
  background: #f8f9fa;
  padding: 10px;
  border-radius: 6px;
  margin-bottom: 10px;
}

.error-sentence {
  border-bottom: 1px solid #dee2e6;
  padding-bottom: 15px;
}

.sentence-analysis {
  padding-top: 15px;
}

mark {
  padding: 2px 5px;
  border-radius: 3px;
}
</style> 